import React, { useCallback } from 'react'
import styles from './index.module.less'
import { Switch, Input, Radio, InputNumber, Button, Checkbox, Select, DatePicker } from 'antd'
import CAT from './img/cat.jpg'
import classNames from 'classnames'
import moment from 'moment'

const { Option } = Select

const SelectBar = (props) => {
	const { setCurSelectNodeIdx, curSelectNodeIdx } = props

	const configs = [
		{
			title: '文本',
			type: 'text',
			children: () => <div className={styles.text}>普通文本</div>,
		},
		{
			title: '计数器',
			type: 'number',
			children: () => <InputNumber type="number" className={styles.numberInput} />,
		},
		{
			title: '开关按钮',
			type: 'switch',
			children: () => (
				<div className={styles.disable}>
					<Switch defaultChecked />
				</div>
			),
		},
		{
			title: '主要按钮',
			type: 'button',
			children: () => <Button className={styles.noEditBtn}>主要按钮</Button>,
		},
		{
			title: '输入框',
			type: 'textInput',
			children: () => <Input className={classNames(styles.textInput, styles.disable)} />,
		},
		{
			title: '单选框',
			type: 'radio',
			children: () => (
				<div className={styles.disable}>
					<Radio.Group value={1}>
						<Radio value={1}>A</Radio>
						<Radio value={2}>B</Radio>
						<Radio value={3}>C</Radio>
					</Radio.Group>
				</div>
			),
		},
		{
			title: '多选框',
			type: 'checkbox',
			children: () => (
				<Checkbox className={styles.disable} checked={true}>
					全选
				</Checkbox>
			),
		},
		{
			title: '下拉选择',
			type: 'select',
			children: () => (
				<Select className={styles.disable} value={'Amin'}>
					<Option value={'Lucy'}>Lucy</Option>
					<Option value={'Jack'}>Jack</Option>
					<Option value={'Amin'}>Amin</Option>
				</Select>
			),
		},
		{
			title: '日期选择',
			type: 'datepicker',
			children: () => <DatePicker value={moment(Date.now())} className={styles.disable} />,
		},
		{
			title: '图片',
			type: 'image',
			children: () => <img src={CAT} alt="" className={classNames(styles.catImg, styles.disable)} />,
		},
	]

	const onDragStart = useCallback(
		(event: any) => {
			props.onDragStart && props.onDragStart(event)
			if (curSelectNodeIdx !== null) {
				setCurSelectNodeIdx(null)
			}
		},
		[curSelectNodeIdx]
	)

	return (
		<div className={styles.selectBox}>
			<div className={styles.selectInnerBox}>
				<div className={styles.selectTitle}>组件列表</div>
				{configs.map((item, idx) => {
					return (
						<div
							onDragStart={onDragStart}
							key={idx}
							className={styles.selectItem}
							draggable={true}
							datatype={item.type}
						>
							<span className={styles.itemTitle}>{item.title}</span>
							{item?.children()}
						</div>
					)
				})}
			</div>
		</div>
	)
}

export default SelectBar
